<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
    <link rel="stylesheet" href="../libs/animate.css" />
  </head>
  <style>
    @keyframes move {
      from {
        transform: scale(0) rotate(0);
      }
      to {
        transform: scale(1) rotate(360deg);
      }
    }
    .move {
      animation: move 4s;
    }
    .img {
      width: 160px;
      height: 160px;
      margin: 20px;
      border-radius: 50%;
      transition: all 2s;
    }
    .v-enter {
      transform: scale(0);
      opacity: 0;
    }
    .v-enter-to {
      transform: scale(1);
      opacity: 1;
    }
    .v-leave {
      transform: scale(1);
      opacity: 1;
    }
    .v-leave-to {
      transform: scale(0);
      opacity: 0;
    }
    @keyframes min {
      0% {
        transform: scale(0) rotate(0) translateX(-100%);
      }
      100% {
        transform: scale(1) rotate(360deg) translateX(0%);
      }
    }
    @keyframes mout {
      0% {
        transform: scale(1) rotate(360deg) translateX(0%);
      }
      100% {
        transform: scale(0) rotate(0) translateX(-100%);
      }
    }
    .a-enter-active {
      animation: min 2s 0s;
    }
    .a-leave-active {
      animation: mout 2s 0s;
    }
    .silde-enter-active {
      animation: fadeInDown 1.5s;
    }
    .silde-leave-active {
      animation: bounceIn 1.5s;
    }
  </style>
  <body>
    <div id="app">
      <h2 class="move">{{title}}</h2>
      <div>
        <transition>
          <img v-if="show" :src="imgSrc" class="img" alt="" />
        </transition>
        <button @click="show=!show">点击切换</button>
      </div>
      <div>
        <transition name="a">
          <img v-if="show1" :src="imgSrc" class="img" alt="" />
        </transition>
        <button @click="show1=!show1">点击切换1</button>
      </div>
      <div>
        <transition name="silde">
          <img v-if="show2" :src="imgSrc" class="img" alt="" />
        </transition>
        <button @click="show2=!show2">点击切换2</button>
      </div>
    </div>
  </body>
  <script>
    const vm = new Vue({
      data: {
        title: "Vue - 快速实现动画",
        imgSrc: "http://47.104.209.44/base/imgs/3.jpg",
        show: true,
        show1: true,
        show2: true,
      },
      mounted() {
        document.querySelectorAll("title")[0].innerHTML = this.title;
      },
    }).$mount("#app");
  </script>
</html>
